<template >
    <page-view>
        <el-card>
            <template #header>
                <div class="flex flex-row justify-between">
                    <div class="font-bold">新增菜品</div>
                    <el-link type="primary" @click="$router.replace({ name: 'FoodInfoList' })">返回列表</el-link>
                </div>
            </template>

            <!-- 表单 -->
            <el-form :model="foodInfoData" label-width="120px" :rules="foodInfoDataRules" ref="formEl">
                <el-form-item label="菜品名称" prop="food_name">
                    <el-input placeholder="请输入菜品名称" v-model="foodInfoData.food_name"></el-input>
                </el-form-item>
                <el-form-item label="菜品价格" prop="price">
                    <el-input-number :min="0" v-model="foodInfoData.price" />
                </el-form-item>
                <el-form-item label="菜品分类" prop="cid">
                    <el-select placeholder="请选择菜品分类" class="w-full" v-model="foodInfoData.cid">
                        <el-option v-for="item in allCategoryInfoList" :key="item.id" :value="item.id"
                            :label="item.category_name"></el-option>

                    </el-select>
                </el-form-item>
                <el-form-item label="菜品图片" prop="food_img">
                    <el-upload v-model="foodInfoData.food_img" :action="baseURL + '/foodInfo/uploadFoodImg'"
                        :headers="{ softeem_ele_admin_token: store.token }" name="food_img"
                        class="w-[200px] h-[200px] border border-dashed border-gray-400 flex flex-row justify-center items-center"
                        :before-upload="beforeUpload" :show-file-list="false" :on-success="uploadSuccess">
                        <el-image :src="baseURL + foodInfoData.food_img" v-if="foodInfoData.food_img" fit="contain"
                            class="w-full h-full">
                        </el-image>
                        <el-icon size="65px" color="#808080" v-else>
                            <PictureFilled />
                        </el-icon>
                    </el-upload>

                </el-form-item>
                <el-form-item label="菜品描述" prop="food_desc">
                    <el-input placeholder="请输入菜品描述" type="textarea" :rows="5" v-model="foodInfoData.food_desc">
                    </el-input>
                </el-form-item>
                <el-form-item label="菜品权重" prop="weight">
                    <div class="w-[350px] flex flex-row items-center">
                        <el-slider v-model="foodInfoData.weight" :min="0" :max="100" :step="0.1" />
                        <el-tag class="w-[30px] ml-10">{{ foodInfoData.weight }}</el-tag>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm" :loading="isSumbiting" loading-icon="Loading">
                        保存数据
                    </el-button>
                    <el-button type="danger" @click="resetForm">重置表单</el-button>
                </el-form-item>
            </el-form>

        </el-card>
    </page-view>
</template>
<script setup>
import { reactive, ref } from "vue";
import { PictureFilled, Loading } from "@element-plus/icons-vue";
import API from "@/utils/API/index.js";
import { onMounted, inject } from "vue";
import { ElNotification } from "element-plus";
import { mainStore } from "../../store/index"
import { useRouter } from 'vue-router'

const router = useRouter()


const store = mainStore();

const baseURL = inject("baseURL");


//表单上面的数据
const foodInfoData = reactive({
    food_name: "",
    price: 0,
    cid: "",
    food_desc: "",
    food_img: "",
    weight: 0
});

//表单验证的规则
const foodInfoDataRules = {
    food_name: [{ required: true, message: "请输入菜品名称", trigger: "blur" }],
    price: [{ required: true, message: "价格不能为空", trigger: "blur" }],
    cid: [{ required: true, message: "请选择菜品分灰", trigger: "blur" }],
    food_desc: [{ required: true, message: "请输入菜品的描述信息", trigger: "blur" }],
    food_img: [{ required: true, message: "请选择菜品图片", trigger: "blur" }],
    weight: [{ required: true, message: "请选择菜品的权重", trigger: "blur" }],
}

//获取所有菜品分类信息
const allCategoryInfoList = ref([])

API.categoryInfo.getAllList().then((result) => {
    allCategoryInfoList.value = result
    // console.log(allCategoryInfoList);
}).catch(() => {

})



const beforeUpload = (rawFile) => {
    let reg = /^image\/(jpe?g|png|webp|gif|bnp)$/
    if (reg.test(rawFile.type)) {
        //说明是有个图片
        if (rawFile.size / 1024 / 1024 > 5) {
            //图片大小大于5m
            ElNotification({
                type: "error",
                title: "错误",
                message: "图片大小不能大于5m"
            })
            return false;
        }
    } else {
        //说明不是一个图片
        ElNotification({
            type: "error",
            title: "错误",
            message: "请选择图片文件，图片格式为jpg，png，webp，gif，bnp格式"
        })
        // console.log(rawFile);
        return false;
    }

}

const uploadSuccess = (result) => {
    // console.log("文件上传成功");
    // console.log(result);
    foodInfoData.food_img = result.data
}


//提交表单   
const formEl = ref(null)
const submitForm = () => {

    //验证表单数据是否合格
    console.log(formEl.value);
    formEl.value.validate(valid => {
        //这个valid就是验证的结果
        // console.log(valid);
        if (valid) {
            addFoodInfo()
            //说明验证成功，我们要提交数据
        } else {
            //验证失败
            ElNotification({
                type: "warning",
                title: "提示",
                message: "请正确填写表单内容"
            })
        }
    })

};

//新增菜品
const isSumbiting = ref(false)
const addFoodInfo = () => {
    isSumbiting.value = true
    API.foodInfo.add(foodInfoData).then(result => {
        ElNotification({
            type: "success",
            title: "提示",
            message: "新增菜品成功"
        })
       
        router.replace({ name: "FoodInfoList" })
    }).catch((error) => {
        ElNotification({
            type: "danger",
            title: "失败了",
            message: "新增菜品失败，请重试或联系管理员"
        })
        console.log(error);
    }).finally(() => {
        isSumbiting.value = false
    })

}


//重置表单

const resetForm = () => {
    // console.log(formEl);
    formEl.value.resetFields();
}

</script>
<style lang="scss" scoped>
:deep(.el-upload) {
    @apply w-full h-full overflow-hidden;
}
</style>